import React, {Component} from "react";
import {
  G2,
  Chart,
  Geom,
  Axis,
  Tooltip,
  Coord,
  Label,
  Legend,
  View,
  Guide,
  Shape,
  Facet,
  Util
} from "bizcharts";
import DataSet from "@antv/data-set";

export default class BarChar extends Component {
  render() {
    const data = this.props.barData.data
    const ds = new DataSet();
    const dv = ds.createView().source(data);
    dv.transform({
      type: "fold",
      fields: this.props.barData.fields,
      // 展开字段集
      key: "机构",
      // key字段
      value: "统计数" // value字段
    });
    return (
      <div >
        <Chart height={400} data={dv} forceFit background={{fill: '#fff',fillOpacity: 1}}>
          <Legend/>
          <Axis name="机构" />
          <Axis name="统计数"/>
          <Tooltip/>
          <Geom
            type="intervalStack"
            position="机构*统计数"
            color={"name"}
            style={{
              stroke: "#fff",
              lineWidth: 1
            }}
          />
        </Chart>
      </div>
    );
  }
}

